import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Row, Col } from 'antd';
import { editCol, editGutter, editRow } from '@/utils/constans';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';

@connect(({ distribution }) => ({ distributionDetail: distribution.distributionDetail }))
export default class DistributionDetail extends Component {
  render() {
    const { distributionDetail, detailId } = this.props;
    const detail = distributionDetail[detailId];
    const editPageParams = {
      panelTitle: ['基础信息'],
    };
    const parentName = detail.fullName ? detail.fullName.split(' ') : [];
    const formItem = [
      [
        <DetailPage label="名称" value={detail.name} />,
        <DetailPage label="地址全路径" value={detail.fullName} />,
      ],
      [
        <DetailPage label="层级" value={detail.level} />,
        <DetailPage label="上级区域" value={parentName[parentName.length - 2]} />,
      ],
      [
        <DetailPage label="关键字" value={detail.keyWords} />,
        <DetailPage label="排序号" value={detail.sort} />,
      ],
      [
        <DetailPage label="状态" value={detail.beActive ? '有效' : '无效'} />,
        <DetailPage label="区域地理围栏" value={detail.areaFence} />,
      ],
    ];
    return (
      <EditPage {...editPageParams}>
        <Fragment>
          {formItem.map((item, index) => {
            return (
              <Row gutter={editGutter} key={index}>
                {item.map((v, i) => {
                  const colSpan = item.length === 1 ? editRow : editCol;
                  return (
                    <Col {...colSpan} key={index + i}>
                      {v}
                    </Col>
                  );
                })}
              </Row>
            );
          })}
        </Fragment>
      </EditPage>
    );
  }
}
